import { Button, Card, Input,MessagePlugin } from 'tdesign-react';
import { LockOnIcon } from 'tdesign-icons-react';
import { useState } from 'react';
import axios from 'axios';
import './shezhi.less';

export default function Shezhi() {
    let [value, setValue] = useState(''); // 新密码
    let [value2, setValue2] = useState(''); // 确认密码
    let [showError, setShowError] = useState(false); // 用于控制是否显示错误提示
    let [errorMessage, setErrorMessage] = useState(''); // 用于存储具体的错误信息

    // 检查密码是否一致以及长度是否符合要求的函数
    const checkPasswordsMatch = () => {
        if (value.length < 6) {
            setErrorMessage('新密码长度至少为6位，请重新输入。');
            setShowError(true);
            return;
        }
        if (value2.length < 6) {
            setErrorMessage('确认密码长度至少为6位，请重新输入。');
            setShowError(true);
            return;
        }
        if (value!== value2) {
            setErrorMessage('两次输入的密码不一致，请重新输入。');
            setShowError(true);
        } else {
            setShowError(false);
            setErrorMessage('');
        }
    };

    // 当密码输入框失去焦点时触发检测
    const handleBlur = (inputType) => {
        if (inputType === 'newPassword') {
            checkPasswordsMatch();
        } else if (inputType === 'confirmPassword') {
            checkPasswordsMatch();
        }
    };

    let updatepass = () => {
        checkPasswordsMatch();
        if (showError) {
            return;
        }
        if (!showError) {
            let data  = axios.post('http://localhost:3000/updatepassword', { _id: sessionStorage.getItem('id'), password: value });
            console.log(data);
            if (data) {
                MessagePlugin.success('修改成功')
            } else {
                MessagePlugin.error('修改失败')
            }
        }
    };

    return (
        <div>
            <Card
                title="修改密码"
                hoverShadow
                style={{
                    width: '100%',
                    height: '300px',
                    marginTop: '20px',
                }}
            >
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>新密码：<Input
                    prefixIcon={<LockOnIcon />}
                    placeholder="请输入密码"
                    value={value}
                    type="password"
                    onChange={(newValue) => {
                        setValue(newValue);
                    }}
                    style={{ width: '300px', marginLeft: '13px' }}
                    onBlur={() => handleBlur('newPassword')}
                />
                </div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>密码确认：<Input
                    prefixIcon={<LockOnIcon />}
                    placeholder="请输入密码"
                    value={value2}
                    type="password"
                    onChange={(newValue) => {
                        setValue2(newValue);
                    }}
                    style={{ width: '300px' }}
                    onBlur={() => handleBlur('confirmPassword')}
                />
                </div>
                {showError && (
                    <div style={{ color: 'red', marginLeft: '13px' }}>{errorMessage}</div>
                )}
                <Button onClick={updatepass} theme="primary">修改</Button>
            </Card>
        </div>
    );
}